<template>
  <div id="struct">
      <div class="loading">
          <div class="left door"></div>
          <div class="right door"></div>
          <div class="circle out">
              <div class="circle center">
                  <div class="circle in"></div>
              </div>
          </div>
      </div>
      <div class="struct-content">
          <header>
              <div class="header-left">
                  Welcome!
              </div>
              <button class="header-right-btn" @click="showNav">
                  <i class="header-right-btn-item"/>
                  <i class="header-right-btn-item"/>
                  <i class="header-right-btn-item"/>
              </button>
              <nav class="header-right">
                  <ul class="header-items">
                      <li><nuxt-link to="/"  exact class="nav-item">网站首页</nuxt-link></li>
                      <li><nuxt-link to="/webpage" class="nav-item">我的文章</nuxt-link></li>
                      <li><nuxt-link to="/examplepage" rel="nofollow" class="nav-item">我的案例</nuxt-link></li>
                  </ul>
              </nav>
          </header>
          <Nuxt/>
          <footer>
              <div>
                  <p class="footer-item">我的QQ : {{qqNumber}}</p>
                  <p class="footer-item">{{copyRight}}</p>
                  <p class="footer-item"><a href="/sitemap.xml">站点地图</a></p>
                  <p class="footer-item">备案号:{{recordNumber}}</p>
              </div>
              <figure>
                  <img :src="imgUrl" alt="网站联系二维码" title="博客作者联系二维码"/>
              </figure>
          </footer>
      </div>
  </div>
</template>
<script>
    import axios from 'axios';
    export default{
    	data(){
    	    return {
    	    	btnClick:false,
                nav:null,
                btn:null,
                btns:[],
		        cumulativeNum:200,
		        qqNumber:'',
		        copyRight:'',
		        recordNumber:'',
		        imgUrl:''
            }
        },
    	async mounted(){
    		let result = await axios.get('/api/getfooterinfo');
    		let data = result.data.data;
    		this.qqNumber = data.qqNumber;
    		this.copyRight = data.copyRight;
    		this.recordNumber = data.recordNumber;
    		this.imgUrl = data.imgUrl;
    		this.nav = document.querySelector('.header-right');
    		this.btn = document.querySelector('.header-right-btn');
		    this.btns = document.querySelectorAll('.header-right-btn-item');
		    let loading = document.querySelector('.loading');
		    let structContent = document.querySelector('.struct-content');
		    let timer1 = setTimeout(()=>{
		    	loading.style.display = 'none';
		    	clearTimeout(timer1);
            },1400);
		    let timer2 = setTimeout(()=>{
			    structContent.style.opacity = '1';
			    clearTimeout(timer2);
            },1000)
        },
        methods:{
    		showNav(){
    			this.btnClick = !this.btnClick;
    			if(this.btnClick){
				    this.nav.classList.add('toggle');
                    this.btn.classList.add('header-right-btn-selected');
    				this.btns[0].style.transform = 'translateX(-4px) rotateZ(-45deg)';
				    this.btns[1].style.opacity = '0';
				    this.btns[2].style.transform = 'translateX(-4px) rotateZ(45deg)';
                }else{
				    this.nav.classList.remove('toggle');
				    this.btn.classList.remove('header-right-btn-selected');
				    this.btns[0].style.transform = 'none';
				    this.btns[1].style.opacity = '1';
				    this.btns[2].style.transform = 'none';
                }
            }
        },
        computed:{
    		cumulative(){
    			return this.cumulativeNum.toString().split('');
            }
        }
    }
</script>

<style>
    *{
      margin:0;
      padding:0;
      box-sizing: border-box;
      user-select: none;
    }
    a{
        text-decoration: none;
        color:#47494e;
    }
    ul{
        list-style: none;
    }
    :root{
        --bg-color:#F5F5F5;
        --black:#2B2F38;
    }
    body{
        background-color: #E6E6E6;
    }
    body::-webkit-scrollbar{
        width: 8px;
    }
    body::-webkit-scrollbar-track{
        background-color: #F1F1F1;
        box-shadow: inset 0 0 2px #D2D8DE;
    }
    body::-webkit-scrollbar-thumb{
        background-color: #C1C1C1;
        border-radius: 4px;
    }
    body::-webkit-scrollbar-thumb:hover{
        background-color: #A8A8A8;
    }
    body::-webkit-scrollbar-corner{
        background-color: #47494e;
    }
    #struct{
        position: relative;
    }
    .loading {
        width: 100%;
        height: 100%;
        position: fixed;
        top:0;
        left: 0;
        overflow: hidden;
        margin-top: 0;
    }
    .door{
        position: absolute;
        width: 50%;
        height: 100%;
        top:0;
        background-color: #222;
    }
    .left{
        left:0;
        animation: toLeft 1.2s ease-in-out .6s forwards;
    }
    .right{
        right:0;
        animation: toRight 1.2s ease-in-out .6s forwards;
    }
    .circle{
        position: fixed;
        top:0;
        left: 0;
        bottom: 0;
        right:0;
        margin: auto;
        background-color: transparent;
        border-radius: 50%;
        border: 3px solid transparent;
        animation: toFade .5s linear forwards;
    }
    .out{
        width: 140px;
        height: 140px;
        border-top: 3px solid red;
    }
    .center{
        width: 125px;
        height: 125px;
        border-top: 3px solid red;
    }
    .in{
        width: 110px;
        height: 110px;
        border-top: 3px solid red;
    }
    @keyframes toLeft {
        0%{
            left:0;
        }
        100%{
            left:-100%;
        }
    }
    @keyframes toRight {
        0%{
            right:0;
        }
        100%{
            right:-100%;
        }
    }
    @keyframes toFade {
        0%{
            opacity: 1;
            transform: rotateZ(0deg);
        }
        100%{
            opacity: 0;
            transform: rotateZ(75deg);
        }
    }
    .struct-content{
        opacity: 0;
        transition: 1s;
    }
    header{
        background-color: rgba(0,0,0,.7);
        position: fixed;
        z-index: 999;
        top:0;
        left: 0;
        display: flex;
        flex-direction: row;
        align-items: center;
        width: 100%;
    }
    .header-right{
        display: block;
    }
    .header-left{
        width: 30vw;
        line-height: 50px;
        text-align: center;
        font-size: 30px;
        color:#fff;
        font-family: 'Verdana',sans-serif;
        transition: 1s;
    }
    .header-items{
        list-style: none;
        display: flex;
        justify-content: center;
    }
    .header-items .nuxt-link-active{
        background-color: #fff;
        color:#000;
    }
    footer{
        padding: 2vw 2vw;
        background-color: #47494e;
        color:#fff;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        font-size: 13px;
    }
    .footer-item{
        line-height: 25px;
        text-align: center;
    }
    .footer-item a{
        color: #fff;
    }
    footer figcaption{
        text-align: center;
        font-size: 13px;
    }
    .footer-center p{
        font-size: 20px;
        margin-bottom: 10px;
    }
    footer figure{
        width: 80px;
        height: 80px;
    }
    figure img{
        width: 100%;
    }
    @media screen and (min-width: 750px){
        header{
            justify-content: left;
        }
        .header-right{
            display: block;
        }
        .header-right-btn{
            display: none;
        }
        .nav-item{
            width: 10vw;
            min-width: 130px;
            text-align: center;
            text-decoration: none;
            display: block;
            padding: 0 10px;
            font-size: 14px;
            line-height: 25px;
            border-radius: 20px;
            border-bottom:1px solid transparent;
            color:#fff;
            transition: .5s;
        }
        .nav-item:hover{
            background-color: rgba(255,255,255,.3);
        }
        footer > figure{
            margin-left: 20px;
        }
    }
    @media screen and (max-width: 750px){
        .header-left{
            width: 70%;
        }
        .header-right{
            display: none;
            position: fixed;
            top:50px;
            width: 100%;
            background-color:rgba(0,0,0,.8);
        }
        .toggle{
            display: block;
        }
        .header-items{
            display: flex;
            flex-direction: column;
            justify-content: center;

        }
        .nav-item{
            display: inline-block;
            width: 100%;
            text-align: center;
            line-height: .1px;
            overflow: hidden;
            color: #fff;
            animation:shownav .5s forwards 1 ;
        }
        .header-right-btn{
            position: absolute;
            right: 20px;
            outline: none;
            width: 40px;
            height: 30px;
            border: 1px solid #fff;
            border-radius: 5px;
            background-color: transparent;
            display: flex;
            flex-direction: column;
            justify-content: space-around;
            align-items: center;
            transition: .5s;
        }
        .header-right-btn-item{
            display: block;
            width: 70%;
            border-bottom: 2px solid #fff;
            transition: .5s;
            transform-origin: right;
        }
        .header-right-btn:hover{
            cursor: pointer;
            background-color: #888888;
            border: 1px solid #333;
        }
        .header-right-btn-selected{
            background-color: #888888;
            border: 1px solid #333;
        }
        .header-right-btn:hover .header-right-btn-item{
            border-bottom: 2px solid #fff;
        }
        .header-items .nuxt-link-active{
            background-color: #fff;
            color:#000;
        }
        footer{
            flex-direction: column;
        }
        footer p{
            transform: scale(.8);
        }
        footer figure{
            margin: 10px auto;
        }
        @keyframes shownav {
            0%{
                line-height: .1px;
                font-size: 12px;
                opacity: 0;
            }
            100%{
                line-height: 35px;
                font-size: 14px;
                opacity: 1;
            }
        }
    }
</style>
